fix(dashboard): stackgraph loses ws status when drawn #791
Conversation
|
|
||
| // // Here we"re setting nodeclass, which is used by our custom drawNodes function | ||
| // // below. | ||
| // if (nodeEl) { |
| // tslint:disable-next-line: no-invalid-this | ||
| const element = this as HTMLElement | ||
| if (element) { | ||
| clearGraphNodeSelection() | ||
|
|
||
| console.log(element.classList) |
| @@ -366,24 +364,6 @@ class Chart extends Component<Props, State> { | |||
| } | |||
| } | |||
|
|
|||
| // Update the node class instead of re-rendering the graph for perf reasons | |||
There was a problem hiding this comment.
I originally added this because the websocket messages would trigger a re-render of the graph which, IIRC, was slow and choppy. But now it looks just fine! What's the secret?
There was a problem hiding this comment.
We use the function getNodeClass inside the drawChart and we only rendering it if only the graph has changed (by changed i mean changed its ref - look at graph.tsx there is this code:
if (message && message.type === "event") { const nodeToUpdate = graph.data.nodes.find(node => node.key === (message.payload && message.payload["key"])) if (nodeToUpdate) { nodeToUpdate.status = message.name graph.data = {...graph.data} } }
changing the graph.data ref will trigger the drawChart.
im not so sure what is the secret, i just think that its more logical this way and maybe the god of javascript like this more so he decided to pump up the performance xD
| @@ -42,6 +42,13 @@ export default () => { | |||
| if (!config.data || !graph.data || config.loading || graph.loading) { | |||
| return <Spinner /> | |||
| } | |||
| if (message && message.type === "event") { | |||
There was a problem hiding this comment.
This is a good solution! The container is exactly the one that should be responsible for preparing the data for the component in this case.
There was a problem hiding this comment.
Thank you very much! :)
That's exactly the thought that guided me to this solution
|
Also, |
benstov
force-pushed
the
persistent-stackgraph-status
branch
from
0acb0c7 to
6ac5116
Compare
eysi09
force-pushed
the
persistent-stackgraph-status
branch
from
6ac5116 to
112e582
Compare
Symptom: The dashboard stack graph resets when I click a node. For example, if a test is broken, so a node has a red border, and I click it, the color goes back to green. Same applies if I click something while some nodes are pending/processing.
Fix: merged the event status into the graph object (in graph container) being passed to the graph component(graph/index)